import React from 'react';
import { Clock, CheckCircle, XCircle } from 'lucide-react';
import { Card } from '../ui/Card';
import { Button } from '../ui/Button';
import { SnackList } from '../snacks/SnackList';
import type { Order } from '../../types';

interface OrderCardProps {
  order: Order;
}

export function OrderCard({ order }: OrderCardProps) {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'pending':
        return <Clock className="h-5 w-5 text-yellow-500" />;
      case 'paid':
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'cancelled':
        return <XCircle className="h-5 w-5 text-red-500" />;
      default:
        return null;
    }
  };

  const formatDate = (timestamp: string) => {
    return new Date(timestamp).toLocaleString('zh-CN');
  };

  const quantities = order.snacks.reduce((acc, { snack, quantity }) => ({
    ...acc,
    [snack.id]: quantity
  }), {});

  return (
    <Card>
      <div className="flex justify-between items-start mb-4">
        <div>
          <div className="flex items-center gap-2">
            <h3 className="text-lg font-semibold">订单 #{order.id}</h3>
            {getStatusIcon(order.status)}
          </div>
          <p className="text-sm text-gray-600">
            {formatDate(order.timestamp)}
          </p>
        </div>
        <span className="text-lg font-bold">¥{order.total}</span>
      </div>

      <SnackList 
        snacks={order.snacks.map(({ snack }) => snack)}
        showQuantity
        quantities={quantities}
      />

      {order.status === 'pending' && (
        <div className="mt-4 flex gap-2">
          <Button variant="primary">立即支付</Button>
          <Button variant="secondary">取消订单</Button>
        </div>
      )}
    </Card>
  );
}